<template>
  <div class="pay-container">
    <!-- 生成微信支付二维码 -->
    <div class="erwei">
       <img :src="payUrl" alt="">
    </div>
    <span>请使用微信支付</span>
    <el-descriptions title="订单详情">
      <el-descriptions-item label="订单号">{{orderDetail.order_id}}</el-descriptions-item>
      <el-descriptions-item label="创建时间">{{orderDetail.create_time}}</el-descriptions-item>
      <el-descriptions-item label="产品名称">{{orderDetail.orderDetail[0].productName}}</el-descriptions-item>
      <el-descriptions-item label="产品描述">{{orderDetail.orderDetail[0].description}}</el-descriptions-item>
      <el-descriptions-item label="购买数量">{{orderDetail.orderDetail[0].quantity}}</el-descriptions-item>
      <el-descriptions-item label="购买用户">{{userInfo.nickname}}</el-descriptions-item>
      <el-descriptions-item label="手机号">{{userInfo.phone?userInfo.phone:"没有手机号码"}}</el-descriptions-item>
      <el-descriptions-item label="总价格">
         {{orderDetail.total_fee}}
      </el-descriptions-item>
    </el-descriptions>

  </div>
</template>
<script>
// 首先要获取订单id
import * as api from "../../../../api";
import {mapState} from "vuex";
import qrCode from "qrcode";
export default {
    data(){
        return{
            //支付订单详情
            orderDetail:{//数据初始化
               orderDetail:[{
                   productName:"",
                   description:"",
                   quantity:""
               }]

            },
            //支付结果
            payUrlRes:{},
            //支付地址
            payUrl:""

        }
    },
    computed:{
        ...mapState(['order_id',"userInfo"])
    },
    created(){
        //3.如果用户刷新了当前页面，本次交易取消，需要重新提交订单
        if(!this.order_id){//没有订单id，有可能刷新了页面
           //提示：本次交易取消，返回到预支付页面
           this.$alert('本次交易取消,请重新提交', '提示', {
              confirmButtonText: '确定',
              callback: action => {
                this.$router.push({name:"pre_order"})
              }
           });
           return


        }
        //1.根据订单，请求订单详情
        //2.根据订单id,获取微信支付地址=>生成二维码
        

        // 并发请求
        Promise.all([api.getOrderDetailApi(this.order_id),api.getPayUrlApi(this.order_id)])
        .then(res=>{
            // console.log(res);
            let orderDetail = res[0].data.data;//订单详情
            let payUrlRes = res[1].data;//订单支付地址

            this.orderDetail = orderDetail
            // this.payUrlRes = payUrlRes
            // this.payUrl = payUrlRes.code_Url//获取支付的二维码地址

            //调用生成二维码地址的方法
            // payUrlRes.code_Url就是微信支付返回的地址
            // 通过支付地址 生成二维码图片地址
            qrCode.toDataURL(payUrlRes.code_url,(err,dataUrl)=>{
                this.payUrl = dataUrl  //生成一个二维码图片的地址
            })

        })
        .catch(err=>{
            console.log(err);
        })

        //轮询 查询支付状态
        //轮询的时候，一定要设置时间
        this.queryPayStatusInterval = setInterval(() => {
            api.queryPayResultApi(this.order_id)
            .then(res=>{
                if(res.data.state){
                    //订单已经支付成功
                    
                    //清除定时器
                    clearInterval(this.queryPayStatusInterval)
                    //跳转到已经支付成功的页面
                    this.$router.push({name:"paySuccess"})
                }
            })
        }, 200);
    },
    beforeDestroy() {
        //清除定时器
        clearInterval(this.queryPayStatusInterval)
    },
}
</script>
